<!-- 企业认证弹窗 -->
<template>
  <div id="company">
    <van-popup v-model="showCompany" round :close-on-click-overlay="false">
      <div class="popup-control-box flex">
        <div class="popup-control-box-title s-15">企业认证</div>
        <div class="popup-control-main">
          <van-form @submit="onSubmit">
            <p class="gray">法定代表人信息</p>
            <van-field v-model="form.legal_name" name="姓名" label="姓名" placeholder="请填写法定代表人姓名" :rules="[{ required: true}]" />
            <van-field v-model="form.legal_idNo" name="身份证号" label="身份证号" placeholder="请填写身份证号" :rules="[{ required: true}]" />
            <p class="gray">组织机构信息</p>
            <van-field name="radio" label="证件号类型" :rules="[{ required: true}]">
              <template #input>
                <van-radio-group v-model="form.org_type" direction="horizontal">
                  <van-radio style="display: flex;" name="1">统一社会信用代码</van-radio>
                  <van-radio style="display: flex; margin-top: 4px;" name="2">工商注册号（部分个体户）</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <p style="color: #ff2424;">请务必按照营业执照显示选择！</p>
            <van-field v-model="form.name" name="组织名称" label="组织名称" placeholder="请填写组织名称" :rules="[{ required: true}]" />
            <van-field v-model="form.org_code" name="证件号" label="证件号" placeholder="请填写证件号" :rules="[{ required: true}]">
              <template #button>
                <van-button size="small" @click="checkoutInfo" v-if="agreement.qcc_status != 0" type="info" style="width: 4rem; border-radius: 5px;">查询</van-button>
              </template>
            </van-field>
          </van-form>
        </div>

        <div class="popup-control-btn flex-j-sa">
          <van-button type="default" size="small" @click="hiddenPop">取消</van-button>
          <van-button type="danger" size="small" @click="sureIdentify">去认证</van-button>
        </div>
        <div class="s-11" style="color: #f51d1d; text-align: left; padding: 0 10px 10px 10px;">
          <template v-if="extinfo&&extinfo.person_name">个人认证姓名：{{extinfo.person_name}} <br /></template>
          当前企业认证，请务必确保您为该企业法人！
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    extinfo: {
      type: Object,
      default: ()=> {}
    },
    cid:{
      type: [Boolean,String],
      default: '0'
    },
  },
  watch: {
    value(val) {
      this.showCompany = val;
      if (val) {
        this.form.legal_name = this.extinfo.person_name;
        this.form.legal_idNo = this.extinfo.person_id_no;
        this.getAgreement();
      }
    }
  },
  data() {
    return {
      showCompany: false,
      agreement: {},
      CompanyData: {},
      form: {
        name: "",
        org_code: "",
        legal_name: "",
        legal_idNo: "",
        org_type: "1"
      },
    };
  },
  components: {},
  computed: {},
  methods: {
    getAgreement() {
      $http
        .post("plugin.yun-sign.frontend.company.get-agreement",{cid: this.cid }).then(response => {
          if (response.result === 1) {
            this.agreement = response.data;
          } else {
            this.$dialog.alert({message:response.msg});
          }
        });
    },
    checkoutInfo() {
      if(!this.form.name) {
        this.$toast("请先填写组织名称");
        return;
      }
      $http
        .post("plugin.yun-sign.frontend.company.qccCheck", {name: this.form.name, cid: this.cid}, '..').then(response => {
          if (response.result === 1) {
            this.form.org_code = response.data.org_code;
          } else {
            this.$dialog.alert({message:response.msg});
          }
        });
    },
    onSubmit() {
      console.log('submit', this.form);
    },
    sureIdentify() {
      if(!this.form.org_type) {
        this.$toast("请选择证件号类型");
        return;
      }

      if(!this.form.name) {
        this.$toast("请填写组织名称");
        return;
      }

      if(!this.form.org_code) {
        this.$toast("请填写证件号");
        return;
      }
      let json = {...this.form};
      if(this.extinfo&&!this.extinfo.is_new) json.cid = this.cid;
      if(!json.cid) json.is_new = 1;
      $http
        .post("plugin.yun-sign.frontend.h5.company.auth-company-v2", json, "...").then(response => {
          if (response.result === 1) {
            this.$dialog.alert({ message: response.msg }).then(() => {
              if(response.data.cid) this.$emit("changeCid", {cid: response.data.cid});//刷新页面数据，企业认证状态改变
              this.hiddenPop();
            });
          } else {
            this.$dialog.alert({message:response.msg});
          }
        },
        response => {
          this.$dialog.alert({message:response.msg});
        }
        );
    },
    hiddenPop(){
      this.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.s-11 {
  font-size: 0.6875rem;
}

.s-13 {
  font-size: 0.8125rem;
}

.s-15 {
  font-size: 0.9375rem;
  color: #1d1d1d;
}

.popup-control-box {
  width: 20rem;
  flex-direction: column;

  .popup-control-box-title {
    height: 3rem;
    line-height: 3rem;
  }

  .popup-control-main {
    // max-height: 19rem;
    overflow: scroll;
  }

  .popup-control-main::-webkit-scrollbar {
    width: 0 !important;
  }

  .popup-control-btn {
    margin: 10px;
  }

  .van-button--small {
    width: 80px;
  }

  p {
    text-align: left;
    text-indent: 14px;
    line-height: 2rem;
    font-weight: bold;
  }
}
</style>
